import { ProFormText, ProFormSwitch, ProFormSelect, ProFormSlider, ProFormDigit } from '@ant-design/pro-components';
import { Form, Col, Row } from 'antd';
import { channel2_4, channel5_8, htmode2_4, htmode5_8 } from './data'

const RadioFormFieldsModule = ({ namePrefix }: any) => {
    // Determine the RF type and assign it to the corresponding option
    let channel: any = [];
    let htmode: any = [];
    if (namePrefix === "radio2_4") {
        channel = channel2_4;
        htmode = htmode2_4;
    } else if (namePrefix === "radio5_8") {
        channel = channel5_8;
        htmode = htmode5_8;
    }

    return (
        <div>
            <br />
            <ProFormSwitch name={[namePrefix, 'disabled']} label="开关" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} />
            <ProFormSelect name={[namePrefix, 'channel']} label="信道" options={channel} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} />
            <ProFormSelect name={[namePrefix, 'htmode']} label="频宽" options={htmode} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} />
            {/* <ProFormSelect name={[namePrefix, 'hwmode']} label="协议" /> */}
            <ProFormSlider name={[namePrefix, 'txpower']} label="功率" min={1} max={30} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} />
            {/* <ProFormDigit label="阈值" name="minrssi" /> */}
        </div>
    );
};

const columnsConfig = [
    { xs: 16, sm: 16, md: 16, lg: 12, xl: 12, name: 'radio2_4', label: '2.4G' },
    { xs: 16, sm: 16, md: 16, lg: 12, xl: 12, name: 'radio5_8', label: '5.8G' }
];

export default () => {
    return (
        <Row gutter={[48, { xs: 8, sm: 16, md: 24, lg: 32, xl: 40 }]}>
            {columnsConfig.map((config, index) => (
                <Col key={index} {...config}>
                    <span className="Form-Item-Title-Span">{config.label}</span>
                    <RadioFormFieldsModule namePrefix={config.name} />
                </Col>
            ))}
        </Row>
    );
};